<template>
  <view class="container">
    <view class="info_box">
      <view class="info_title"> 基础信息 </view>
      <view class="info_content">
        <text> 司机姓名 </text>
        <text> {{ nickname || '-' }} </text>
      </view>
      <view class="info_content" style="padding-bottom: 20rpx">
        <text> 收运车辆 </text>
        <text> {{ licenseNumber || '-' }} </text>
      </view>
    </view>
    <view class="info_box" style="margin-top: 20rpx; padding: 20rpx">
      <view class="info_title" style="padding-left: 0;padding-top: 0;"> 报停信息 </view>
      <view class="form_box"> 报停原因 </view>
      <div class="borders">
        <input placeholder="请输入内容" v-model="faultCause" style="height: 42px;"></input>
      </div>
      <view class="form_box"> 报停时长（时） </view>
      <div class="borders">
        <input style="height: 42px;" placeholder="请输入内容" v-model="faultDuration"></input>
      </div>
      <view class="form_box"> 现场照片（图1） </view>
      <u-upload :capture="['camera']" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
        :maxCount="1" width="150" height="150">
      </u-upload>
      <view class="form_box"> 现场照片（图2） </view>
      <u-upload :capture="['camera']" :fileList="fileList2" @afterRead="afterReads" @delete="deletePics" name="2"
        multiple :maxCount="1" width="150" height="150">
      </u-upload>
      <div style="height: 40px;"></div>
      <!-- <u-button text="提交" color="#000000" style="margin-top: 40rpx;height: 45px;" @click="submitInfo"></u-button> -->
      <div @click="submitInfo" class="submitBtn">提交</div>
      <div style="height: 10px;"></div>
    </view>

    <!--<div class="border">
            <div class="border-content">
                <div style="height: 10px;"></div>
                <div class="top-line">
                    <div class="line"></div>
                    <div style="width: 10px;"></div>
                    <div style="color: #1A512C;">报停信息填报</div>
                </div>
                <div style="height: 10rpx;"></div>
                <!~~ 表单 ~~>
                <div style="color: #718778;">
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">日期</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            <!~~ <input type="text" readonly v-model="date"> ~~>
                            {{ date }}
                            <div style="height: 5rpx;"></div>

                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">时间</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ time }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">司机</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ nickname }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">收运车</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ licenseNumber }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">报停原因</div>
                        <div class="borders" style="color: #1A512C;">
                            <div style="height: 5rpx;"></div>
                            <input v-model="faultCause" placeholder-class="holder-class" type="text" placeholder="请输入报停原因">
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">报停时长</div>
                        <div style="display: flex;align-items: center;width: 70%;">
                            <div class="borders-min" style="width: 60%;color: #1A512C;">
                                <div style="height: 5rpx;"></div>
                                <input type="text" placeholder-class="holder-class" v-model="faultDuration" placeholder="请输入报停时长">
                                <div style="height: 5rpx;"></div>
                            </div>
                            <div style="width: 5px;"></div>
                            <div class="borders-min" style="width: 40%;">
                                <div style="height: 5rpx;"></div>
                                小时
                                <div style="height: 5rpx;"></div>
                            </div>
                        </div>
                    </div>

                    <div style="height: 10px;"></div>
                </div>
                <div>
                    <div style="width: 30%;color: #1A512C;font-weight: 500;">现场照片</div>
                    <div style="height: 15px;"></div>
                    <div style="display: flex;align-items: center;justify-content: space-around;">
                        <div>
                            <u-upload :capture="['camera']" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                            :maxCount="1" width="170" height="150">
                            <image
                                src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fupload.jpg"
                                mode="widthFix" style="width: 150px;height: 150px;"></image>
                        </u-upload>
                        </div>
                       <div>
                        <u-upload :capture="['camera']" :fileList="fileList2" @afterRead="afterReads" @delete="deletePics" name="2" multiple
                            :maxCount="1" width="170" height="150">
                            <image
                                src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fupload.jpg"
                                mode="widthFix" style="width: 150px;height: 150px;"></image>
                        </u-upload>
                       </div>
                    </div>
                </div>
                <!~~ 按钮 ~~>
                <div style="height: 10px;"></div>
                <div class="footer">
                    <div class="button-footer" @click="cancel">取消</div>
                    <div class="button-footer" @click="submitInfo">提交</div>
                </div>
            </div>
        </div>-->
  </view>
</template>
<script>
import { saveCar } from "../api/api";
import request from "../../common/request";
export default {
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    return {
      date: currentDate,
      time: "",
      faultCause: "", //报停原因
      faultDuration: "", //时长
      nickname: "",
      licenseNumber: "",
      fileList1: [],
      fileList2: [],
      img1: "",
      img2: "",
      base: "",
      request: request,
      infoData: {
        name: "",
      },
    };
  },
  methods: {
    // 返回
    cancel() {
      uni.navigateBack({ delta: 1 });
    },
    bindDateChange: function (e) {
      //选择日期
      this.date = e.detail.value;
      console.log("date", this.date);
    },
    getDate(type) {
      //年月日
      const date = new Date();
      // const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    getTime() {
      const now = new Date();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      // this.time = hours + ':' + minutes
    },
    // 提交
    submitInfo() {
      console.log(this.img1, "img1");
      console.log(this.img2, "img2");
      console.log(this.faultCause, "fallca");
      console.log(this.faultDuration, "udra");
      if (
        this.img1 == "" ||
        this.img2 == "" ||
        this.faultCause == "" ||
        this.faultDuration == ""
      ) {
        uni.showToast({
          title: "输入完整后提交",
          icon: "none",
        });
      } else {
        let combinedString = `${this.img1},${this.img2}`;
        console.log(combinedString);
        saveCar({
          faultTime: this.date + " " + this.time,
          driverName: this.nickname,
          licenseNumber: this.licenseNumber,
          faultCause: this.faultCause,
          faultDuration: this.faultDuration,
          scenePhoto: combinedString,
          faultDurationUnit: "小时",
        }).then((res) => {
          console.log(res, "add");
          if (res.data.code == 200) {
            uni.showToast({
              title: res.data.msg,
              icon: "success",
              mask: true,
            });
            setTimeout(() => {
              this.closeForm();
              uni.navigateBack({ delta: 1 });
            }, 1000);
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
              mask: true,
            });
          }
        });
      }
    },
    //
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    deletePics(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      console.log(event);
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    async afterReads(event) {
      console.log(event);
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromises(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: `${this.base}/file-upload/single`,
          filePath: url,
          name: "file",
          formData: {
            type: "faultPhoto",
          },
          header: {
            Authorization: uni.getStorageSync("token"),
          },
          success: (res) => {
            const data = JSON.parse(res.data);
            console.log(data);
            this.img1 = data.data;
            resolve(res.data.data);
          },
        });
      });
    },
    uploadFilePromises(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: `${this.base}/file-upload/single`,
          filePath: url,
          name: "file",
          formData: {
            type: "faultPhoto",
          },
          header: {
            Authorization: uni.getStorageSync("token"),
          },
          success: (res) => {
            const data = JSON.parse(res.data);
            console.log(data, "data2");
            this.img2 = data.data;
            resolve(res.data.data);
          },
        });
      });
    },
    closeForm() {
      this.img1 = "";
      this.img2 = "";
      this.fileList1 = [];
      this.fileList2 = [];
      this.faultCause = "";
      this.faultDuration = "";
    },
  },
  onShow() {
    this.getTime();
    this.nickname = uni.getStorageSync("userInfo").nickName;
    console.log(this.nickname);
    //
    this.licenseNumber = uni.getStorageSync("licenseNumber")[0];
    console.log(this.licenseNumber);
    this.base = this.request.config.baseURL;
    let now = new Date();
    let hours = now.getHours().toString().padStart(2, "0");
    let minutes = now.getMinutes().toString().padStart(2, "0");
    let seconds = now.getSeconds().toString().padStart(2, "0");
    let currentTime = `${hours}:${minutes}:${seconds}`;
    console.log(currentTime); // 例如输出：09:00:00
    this.time = currentTime;
  },
};
</script>
<style lang="scss">
.submitBtn{
  width: 100%;
  background: #000000;
  height: 45px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.container {
  background: #f3f3f3;
  padding: 40rpx;
  min-height: 100vh;

  .info_box {
    width: 100%;
    box-sizing: border-box;
    border-radius: 30rpx;
    background-color: #fff;

    .info_title {
      width: 100%;
      padding: 20rpx;
      border-bottom: 2rpx solid #f2f2f2;
      font-size: 36rpx;
      font-weight: 700;
    }

    .info_content {
      padding: 20rpx 20rpx 0 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
    }

    .form_box {
      margin: 20rpx 0;
      font-size: 28rpx;
    }
  }

  .border {
    border-radius: 10px;
    background: #e3ede2;
    height: 100vh;
    overflow-y: scroll;

    .border-content {
      width: 90%;
      margin-left: 5%;
    }
  }
}

.top-line {
  display: flex;
  align-items: center;
}

.line {
  background: #1a512c;
  width: 7rpx;
  height: 35rpx;
}

.form-flex {
  display: flex;
  align-items: center;
  width: 100%;
}

.borders {
  border: 1px solid #000000;
  border-radius: 5px;
  text-align: center;
}

.borders-min {
  border: 1px solid #1a512c;
  border-radius: 5px;
  text-align: center;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.button-footer {
  width: 48%;
  height: 50px;
  background: #46a164;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  border-radius: 10px;
}

.top {
  width: 224rpx;
  height: 224rpx;
  margin: 0 auto;
  margin-bottom: 50rpx;
  margin-top: 50rpx;
  border: 1px solid red;

  image {
    width: 224rpx;
    height: 224rpx;
    border-radius: 50%;
  }

  .tips {
    font-size: 28rpx;
  }
}
</style>
<style>
.holder-class {
  color: #1a512c;
}
</style>
